<template>
  <teleport to="body">
    <transition name="d">
      <div v-if="modelOpen" class="xui-dialog" :style="{ width: w }">
        <div class="xui-dialog-header">
          <div class="xui-dialog-header-icon"></div>
          <div class="xui-dialog-header-title">{{ title }}</div>
          <div class="xui-dialog-header-close">
            <a @click="close"
              ><xui-icon :type="icon.nf_cod_close"></xui-icon
            ></a>
          </div>
        </div>
        <div class="xui-dialog-content">
          <slot></slot>
        </div>
        <div class="xui-dialog-footer">
          <button class="close" @click="close">关闭</button>
          <button class="confirm" @click="confirm">确定</button>
        </div>
      </div>
    </transition>
    <transition name="overlay">
      <div v-if="modelOpen" class="xui-dialog-overlay" @click="close"></div>
    </transition>
  </teleport>
</template>
<script lang="ts">
import { ref } from "vue";
import icon from "/@/components/XUII/icon";
import XuiIcon from "/@/components/XUII/icon/index.vue";
import { DialogState } from "./dialogState";

export default {
  components: { XuiIcon },
  props: {
    title: {
      type: String,
      default: () => ''
    },
    width: {
      type: [Number, String],
      default: () => "35%",
    },
  },
  emits: ['register', 'confirm', 'close'],
  setup(props, { emit }) {
    let modelOpen = ref<boolean>(false);

    let dialog: DialogState = {
      open: () => {
        modelOpen.value = true;
      },
      close: () => {
        emit('close')
        modelOpen.value = false
      },
    };

    emit("register", dialog);
    return {
      modelOpen,
      w: props.width,
    };
  },
  methods: {
    close() {
      this.$emit("close");
      this.modelOpen = false;
    },
    confirm() {
      this.$emit("confirm");
    },
  },
  data(vm) {
    return {
      icon,
    };
  },
};
</script>

<style lang="scss" scoped>
.xui-dialog-overlay {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1000;
  background: #179f847c;
}

.overlay-enter-from {
  opacity: 0;
  visibility: hidden;
}

.overlay-enter-to {
  opacity: 1;
  visibility: visible;
}

.overlay-enter-active {
  transition: all 0.3s;
}

.overlay-leave-from {
  opacity: 1;
  visibility: visible;
}

.overlay-leave-to {
  opacity: 0;
  visibility: hidden;
}

.overlay-leave-active {
  transition: all 0.3s;
}

.xui-dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  min-height: 100px;
  max-height: 90%;
  z-index: 2000;
  background-color: #fff;
  transform: translateX(-50%) translateY(-50%);
  display: flex;
  flex-direction: column;

  .xui-dialog-header {
    height: 3em;
    display: flex;

    .xui-dialog-header-icon {
      width: 3em;
    }

    .xui-dialog-header-title {
      flex: 1;
      line-height: 3em;
    }

    .xui-dialog-header-close {
      width: 3em;

      a {
        width: 100%;
        height: 100%;
        display: block;
        padding: 1em;
        color: #999;
        transition: all 0.4s;

        &:hover {          
          color: #e74c3c;
          transition: all 0.4s;
        }
      }
    }
  }

  .xui-dialog-content {
    padding: 1em;   
    flex: 1;    
    overflow: auto;
  }

  .xui-dialog-footer {
    height: 40px;

    button {
      display: inline-block;
      height: 40px;
      outline: none;
      border: none;
      width: 50%;
      background-color: transparent;
      background: #e5e5e5;
    }

    .close:hover {
      background: #d94235;
      color: white;
      transition: all 0.4s;
    }

    .confirm:hover {
      background: #2d78f4;
      color: white;
      transition: all 0.4s;
    }
  }
}

.d-enter-from {
  transform: translateX(-50%) translateY(-50%) scale(0.7);
  opacity: 0;
}

.d-enter-to {
  transform: translateX(-50%) translateY(-50%) scale(1);
  opacity: 1;
}

.d-enter-active {
  transition: all 0.3s;
}

.d-leave-from {
  transform: translateX(-50%) translateY(-50%) scale(1);
  opacity: 1;
}

.d-leave-to {
  transform: translateX(-50%) translateY(-50%) scale(0.7);
  opacity: 0;
}

.d-leave-active {
  transition: all 0.3s;
}
</style>
